<template>
  <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
    <a-spin :spinning="loading">
      <a-form
        name="basic"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        style="width: 500px"
      >
        <a-form-item label="头像">
          <AvatarUpload
            ref="editorRef"
            id="editor"
            v-model:data="formValue.avatar"
          />
        </a-form-item>
        <a-form-item label="账号">
          <a-input v-model:value="formValue.userName" :disabled="true" />
        </a-form-item>
        <a-form-item label="姓名">
          <a-input v-model:value="formValue.realName" />
        </a-form-item>
        <a-form-item label="昵称">
          <a-input v-model:value="formValue.nickName" />
        </a-form-item>
        <a-form-item label="电话">
          <a-input v-model:value="formValue.phone" />
        </a-form-item>
        <a-form-item label="邮箱">
          <a-input v-model:value="formValue.email" />
        </a-form-item>
        <a-form-item label="性别">
          <a-select
            ref="select"
            v-model:value="formValue.sex"
            style="width: 100px"
            @change="handleSexChange"
            :options="sexOpts"
          >
          </a-select>
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 5, span: 16 }">
          <a-button type="primary" html-type="submit" @click="handleSubmit"
            >提交</a-button
          >
        </a-form-item>
      </a-form>
    </a-spin>
  </a-card>
</template>
<script lang="ts">
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";
import { defineComponent, reactive, ref, UnwrapRef, onMounted } from "vue";
import ResultEnum from "@/config/ResultEnum";
import { getProfile, submitProfile, sexOptions, FormValue } from "./index";
import {
  UserOutlined,
  PlusOutlined,
  LoadingOutlined,
} from "@ant-design/icons-vue";
import AvatarUpload from "@/components/AvatarUpload/index.vue";

export default defineComponent({
  components: {
    UserOutlined,
    PlusOutlined,
    LoadingOutlined,
    AvatarUpload,
  },
  setup() {
    const router = useRouter();
    const loading = ref(false);
    const formValue = reactive<FormValue>({
      userName: "",
      realName: "",
      nickName: "",
      email: "",
      phone: "",
      sex: "",
      avatar: "",
    });

    const sexOpts = ref(sexOptions);

    onMounted(() => {
      loading.value = true;
      getProfile().then((res: any) => {
        loading.value = false;
        if (res.code == ResultEnum.SUCCESS_CODE) {
          let result = res.result;
          formValue.userName = result.userName;
          formValue.realName = result.realName;
          formValue.nickName = result.nickName;
          formValue.email = result.email;
          formValue.phone = result.phone;
          formValue.sex = result.sex;
          formValue.avatar = result.avatar;
        } else {
          message.error(res.message);
        }
      });
    });

    const handleSubmit = () => {
      loading.value = true;
      submitProfile({
        realName: formValue.realName,
        nickName: formValue.nickName,
        email: formValue.email,
        phone: formValue.phone,
        sex: formValue.sex,
        avatar: formValue.avatar,
      }).then((res: any) => {
        loading.value = false;
        if (res.code == ResultEnum.SUCCESS_CODE) {
          message.success("修改成功");
        } else {
          message.error(res.message);
        }
      });
    };

    const handleSexChange = (value: string) => {
      console.log(`selected ${value}`);
      formValue.sex = value;
    };

    return {
      loading,
      formValue,
      handleSubmit,
      handleSexChange,
      sexOpts,
    };
  },
});
</script>
